<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8" />
    <title>电商门户网站</title>
    <link th:href="@{/static/css/public.css}" rel="stylesheet" type="text/css" />
    <link th:href="@{/static/css/index.css}" rel="stylesheet" type="text/css" />
    <script type="text/javascript" th:src="@{/static/js/jquery-1.3.2.min.js}"></script>
    <script type="text/javascript" th:src="@{/static/js/html5.js}"></script>
    <script type="text/javascript" th:src="@{/static/js/popbox.js}"></script>
    <style type="text/css">
        .item-list { display: none; position: absolute; width: 705px; min-height: 200px; _height: 200px; background: #FFF; left: 198px; box-shadow: 0px 0px 10px #DDDDDD; border: 1px solid #DDD; top: 3px; z-index: 1000000; }
        /* Remove Float */
        .clear { display: block; height: 0; overflow: hidden; clear: both; }
        .clearfix:after { content: '\20'; display: block; height: 0; clear: both; }
        .clearfix { *zoom:1;
        }
        .hover { position: relative; z-index: 1000000000; background: #FFF; border-color: #DDD; border-width: 1px 0px; border-style: solid; }
    </style>

</head>
<body>
<!--header-->
<header class="header">
    <!--topBar-->
    <div class="topBar" th:replace="/top_bar :: .topBar"></div>
    <!--//topBar-->
    <!--headerMain-->
    <div class="headerMain layout clearfix" th:replace="/header_main :: .headerMain"></div>
    <!--//headerMain-->
    <!--headerNav-->
    
    <div class="headerNav" th:replace="/index_header_nav :: .headerNav"></div>
    <!--//headerNav-->
</header>
<!--//header-->
<!--container-->
<div class="container">
    <div class="layout clearfix">
        <!--banner-->
        <div class="banner">
            <div class="banner-img">
                <ul>
                    <li><a href="#"><img width="727" height="350" th:src="@{/static/images/banner_970x355.jpg}" /></a></li>
                    <li><a href="#"><img width="727" height="350" th:src="@{/static/images/banner_970x355.jpg}" /></a></li>
                    <li><a href="#"><img width="727" height="350" th:src="@{/static/images/banner_970x355.jpg}" /></a></li>
                </ul>
            </div>
            <ul class="banner-btn">
                <li class="current"></li>
                <li></li>
                <li></li>
            </ul>
        </div>
        <!--//banner-->
        <!--快捷充值-->
        <div class="index-fast-recharge">
            <div class="recharge-body">
                <div class="recharge-head">
                    <h2><em class="icon-phone"></em>话费充值</h2>
                </div>
                <div class="recharge-con">
                    <div class="recharge-form">
                        <p>
                            <label class="name">手机号：</label>
                            <input placeholder="支持电信" type="text" class="text-box" />
                        </p>
                        <p>
                            <label class="name">充值方式：</label>
                            <label>
                                <input type="radio" class="rd" />
                                电信充值卡</label>
                            <label>
                                <input type="radio" class="rd" />
                                银行卡</label>
                        </p>
                        <div class="recharge-sub-btn"> <a href="#" class="btn btn-red">立即充值</a> </div>
                    </div>
                    <div class="recharge-ad"> <img th:src="@{/static/images/rachange_ad.jpg}" /> </div>
                </div>
            </div>
        </div>
        <!--//快捷充值-->
        <div class="clearfix"></div>
        <!--最新上架-->
        <div class="first-pannel clearfix">
            <div class="index-f clearfix">
                <h3 class="index-f-head"> 最新上架 <span>每天都有上新，每天都有惊喜</span> </h3>
                <div class="index-f-body">
                    <div class="top-sales newProduct">
                        <ul class="top-sales-list clearfix">
                            <li class="top-sales-item newProduct" th:each="item : ${items}">
                                <p class="item-img"> <a th:href="@{'/portal/item/toDetail/'+${item.spuId}+'/'+${item.skuId}}"><img th:src="@{${item.imgPath}}" /></a> </p>
                                <p class="item-buss"><a th:href="@{'/portal/item/toDetail/'+${item.spuId}+'/'+${item.skuId}}"></a></p>
                                <p class="item-name spec"><a th:href="@{'/portal/item/toDetail/'+${item.spuId}+'/'+${item.skuId}}" th:text="${item.itemName}"></a></p>
                                <p class="item-price spec"><em th:text="${item.mPrice}"></em>元</p>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <!--最新上架//-->
    </div>
</div>
<!--//container-->
<!--footer-->
<footer class="footer" th:replace="footer :: .footer"></footer>
<!--//footer-->

<script type="text/javascript">
    //banner
    $(document).ready(function(){
        var demo = $(".banner");
        var btn = $(".banner-btn li");
        var slide = $(".banner-img ul");
        var slideItem = slide.find("li");
        var c = 0, speed = 4000 , t;
        btn.each(function(number){
            $(this).click(function(){
                $(this).addClass("current").siblings().removeClass("current");
                slide.animate({"left":-slideItem.width()*number},300);
                c = number;
            });
        });

        if(btn.size()>1){
            autoSlide();
        }

        function timedCount()
        {
            c = c + 1;
            if(c>=btn.size())c = 0;
            btn.eq(c).click();
        }

        function autoSlide(){
            t = setInterval(function(){timedCount();},speed);
        }
        //鼠标移入停止播放
        demo.mouseover(function(){
            clearInterval(t);
        });
        demo.mouseout(function(){
            autoSlide();
        });
    });
</script>
</body>
</html>
